<template>
  <a-modal v-model:open="open" width="90%"
           :footer="null"
           style="top: 20px"
           title="用户回收站"
           :keyboard="false"
           :mask-closable="false"
           @cancel="handleClose">
  <div>
      <div class="flex justify-content-between mb10">
        <div class="flex">
          <div>
            <span class="mr5"><a-button type="primary" @click="handleBatchRecover" size="small" :disabled="state.selectedRowKeys.length == 0" danger> <template #icon><CloseOutlined/> </template>批量恢复</a-button></span>
            <span class="mr5"><a-button type="primary" @click="handleBatchRemove" size="small"  :disabled="state.selectedRowKeys.length == 0" danger> <template #icon><CloseOutlined/> </template>彻底删除</a-button></span>
          </div>
        </div>
        <div><a-form layout="inline" autocomplete="off" ref="searchFormRef" :model="queryParams">
            <a-form-item label="关键词" name="keyword">
              <a-input v-model:value.trim="queryParams.keyword" size="small" style="width: 160px"  placeholder="请输入关键词" allow-clear/>
            </a-form-item>
            <a-form-item>
              <div class="flex">
                <a-button type="primary" size="small" @click="handleSearch">
                  <SearchOutlined/>
                  搜索
                </a-button>
                <a-button type="primary" danger size="small" @click="handleReset" class="ml10">
                  <UndoOutlined/>
                  重置
                </a-button>
              </div>
            </a-form-item>
          </a-form>
        </div>
      </div>

      <a-table
              :columns="columns"
               rowClassName="items"
               :loading="tableLoading"
               rowKey="id"
               :scroll="{ x: 'calc(100vw - 326px)', y: 'calc(100vh - 300px)' }"
               :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
               :pagination="false"
               :data-source="tableData"
               style="height:calc(100vh - 305px)"
               size="small" sticky bordered>
        <template #bodyCell="{ column,text,record,index }">
          <template v-if="column.dataIndex==='username'">
           <div class="flex">
             <img :src="record.avatar" class="avatar" style="width: 24px;height: 24px;border-radius: 50%;">
             <span class="ml10">{{record.username}}</span>
           </div>
          </template>
          <template v-if="column.dataIndex === 'operation'">
            <div class="editable-row-operations">
              <span class="mr5">
                <a-button type="primary" @click="handleRecover(record.id)" size="small"> <template #icon><EditOutlined style="font-size:12px"/></template>恢复删除</a-button>
              </span>
              <span>
                 <a-popconfirm title="你确定删除吗?"  @confirm="handleRemove(record.id)">
                    <a-button type="primary" danger size="small"> <template #icon><CloseOutlined
                        style="font-size:12px"/></template>彻底删除</a-button>
                  </a-popconfirm>
              </span>
            </div>
          </template>
        </template>
      </a-table>
      <div class="flex  mt20">
        <a-pagination
            v-model:current="queryParams.pageNo"
            v-model:page-size="queryParams.pageSize"
            @change="handleChangePageNo"
            :page-size-options="pageSizeOptions"
            :show-total="total => `共 ${total} 项`"
            show-size-changer
            :total="total"/>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
const open = ref(false)
const searchFormRef = ref(null)
const tableLoading = ref(false)
const total = ref(0)
const tableData = ref([]);
const pageSizeOptions = ref(['15', '20', '30', '40', '50']);
const emits = defineEmits(["success"])
const queryParams = reactive({
  pageNo: 1,
  pageSize: 15,
  status:null,
  keyword:''
})

const state = reactive({
  selectedRowKeys: [],
  loading: false,
})

const columns = [
  {title: '序号', width: 80, dataIndex: 'index',align:"center", fixed: 'left',customRender:({text,record,index})=>index+1},
  {title: '昵称', width: 200, dataIndex: 'username',align:"center", fixed: 'left'},
  {title: '账号', dataIndex: 'account', width: 150,align:"center"},
  {title: '手机', dataIndex: 'phone', width: 150,align:"center"},
  {title: '邮箱', dataIndex: 'email', width: 150,align:"center"},
  {title: '是否管理员', dataIndex: 'admin', width: 150,align:"center"},
  {
    title: '操作',
    dataIndex: 'operation',
    fixed: 'right',
    align: "center",
    width: 400,
  },
];


/**
 * 查询列表数据
 */
const handleLoadData = async ()=>{
  tableLoading.value = true
  const resp = await useLoadRecycleUserApi(queryParams)
  tableLoading.value = false
  tableData.value = resp.data.records
  total.value = resp.data.total
}

// 改变分页查询
const handleChangePageNo = (pno, psize) => {
  queryParams.pageNo = pno;
  queryParams.pageSize = psize;
  handleLoadData()
}

// 搜索
const handleSearch = ()=>{
  queryParams.pageNo = 1;
  handleLoadData()
}

const handleReset = ()=>{
  searchFormRef.value.resetFields()
  handleLoadData()
}
// 选择行
const onSelectChange = (selectedRowKeys) => {
  state.selectedRowKeys = selectedRowKeys;
};

/**
 * 恢复删除
 * @param id
 * @returns {Promise<void>}
 */
const handleRecover = async(id) => {
  await useRecoverUserApi(id)
  notification.destroy()
  notification.success({
    "message": "提示",
    "description": "恢复成功"
  })
  handleLoadData()

}

/**
 * 批量彻底删除
 */
const handleBatchRemove = ()=>{
  Modal.confirm({
    title: '提示',
    content: '你确定真的彻底删除码？',
    async onOk() {
       try {
         await useBatchRemovesApi({ids:state.selectedRowKeys})
         useMessage().success("删除成功")
         handleLoadData()
       }catch (e){
         useMessage().error(e.msg)
       }
    },
    onCancel() {},
  });

}

/**
 * 彻底删除
 */
const handleRemove = async(userId)=>{
  await useRemoveByIdUserApi(userId)
  useMessage().success("删除成功")
  handleLoadData()
}

const handleClose = ()=>{
  open.value = false;
  emits("success")
}

const handleOpen = ()=>{
  open.value = true;
  handleLoadData()
}

const handleBatchRecover = async ()=>{
  await useBatchRecoversApi({ids:state.selectedRowKeys})
  state.selectedRowKeys = []
  handleLoadData()
}


defineExpose({
  handleOpen
})
</script>

